<template>
  <div>
    <el-checkbox-group v-model="radioCheckedList" size="mini" @change="checkedChange">
      <el-checkbox v-for="item in list" :key="item.id" :label="item.checkName" border></el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: 'checkPeopleGroups',

  props: {
    k: {
      type: 'String',
      default: () => ''
    },
    list: {
      type: 'Array',
      default: () => []
    },
    allList: {
      type: 'Array'
    },
    isCheckPersonList: {
      type: 'Array'
    },
  },

  watch: {
    radioCheckedList: function(newVal, oldVal) {
      if (newVal.length > oldVal.length) {
        console.log('add');
        this.addHandle(newVal, oldVal);
      } else if (newVal.length < oldVal.length) {
        console.log('cut');
        this.cutHandle(newVal, oldVal);
      }
    }
  },

  data() {
    return {
      radioCheckedList: []
    };
  },

  methods: {
    checkedChange(val) {
      // console.log(val);
      // console.log(this.list);
      this.radioCheckedList = val;
      let group = {
        type: this.k,
        list: val
      };
      this.getPerson(group);
    },

    // 点击之后获取人员
    getPerson(group) {

      // console.log(group);

      group.list.forEach(item => {
        // console.log(item);
        this.getPersonList(group.type, item);
      });
    },

    // 获取人员
    async getPersonList(paramName, paramContent) {
      let param = {};

      // param[paramName] = paramContent;
      // console.log(param);
      // const res = await this.$api.basics.getPersonList({
      //   ...param
      // });
      // if (res.data.type === 'success') {
      //   let { data } = res.data;
      //   let val = {
      //     type: paramName,
      //     data
      //   };
      //   // 更新选中人员列表
      //   this.$emit('getPersonTypeFrom', val);
      //   // 人员列表去重
      //   this.$emit('filterRepeat');
      // }

      // 筛选出符合条件的项
      const data = this.allList.filter(item => {
        return item[paramName] === paramContent;
      });

      // console.log(data);

      // 将数据拼接
      let val = {
        type: paramName,
        data
      };

      // 更新选中人员列表
      this.$emit('getPersonTypeFrom', val);
      // 人员列表去重
      this.$emit('filterRepeat');

    },

    // 监听的添加操作
    addHandle(newVal, oldVal) {
      // console.log(newVal, oldVal);
      let changeItem = this.tools.contrastArray(newVal, oldVal);



    },

    // 监听的添加操作
    cutHandle(newVal, oldVal) {
      console.log(newVal, oldVal);
      let changeItem = this.tools.contrastArray(newVal, oldVal)[0];

      // 把当前改变项的匹配项全部删除
      this.isCheckPersonList = this.isCheckPersonList.filter(item => item[this.k] !== changeItem);

      this.$emit( 'update:isCheckPersonList', this.isCheckPersonList );

      // 人员列表去重
      this.$emit('filterRepeat');
    },

  },

};
</script>

<style scoped lang="less">
  .el-checkbox-group {
    margin-bottom: 12px;
  }
</style>
